{% extends 'nav.html' %}
{% block title %}酒店事务{% endblock %}
{% block style %}
    <style>
        #nav ul .hotelmanage {
            background: linear-gradient(90deg, rgba(71, 137, 255, 1) 0%, rgba(71, 137, 255, 1) 2%, rgba(71, 137, 255, 0.47) 3%, rgba(71, 137, 255, 0.1) 56%, rgba(36, 69, 128, 0) 100%);
            border-radius: 3px;
        }

        #user {
            float: right;
            margin-right: 58px;
            margin-bottom: 43px;
        {#margin-left: 1300px;#} display: inline-block;
        }

        .right {
            position: absolute;
            left: 307px;
            top: 35px;
        }

        table {
            border-collapse: separate;
            white-space: nowrap;
            width: 100%;
        }

        table thead {
            width: 100%;
            height: 51px;
            background: rgba(244, 247, 251, 1);
            opacity: 1;
            border-radius: 7px;
            margin-top: 50px;
        }

        table tr:first-child th:first-child {
            border-top-left-radius: 7px;
            border-bottom-left-radius: 7px;
        }

        table tr:first-child th:last-child {
            border-top-right-radius: 7px;
            border-bottom-right-radius: 7px;
        }

        table th {
            text-align: center;
            font-size: 17px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 38px;
            opacity: 1;
            color: #9EADC5;
        }

        table td {
            text-align: center;
            height: 53px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 40px;
            color: rgba(77, 98, 130, 1);
            opacity: 1;
        }
    </style>
{% endblock %}
{% block js %}
    <script type="text/javascript">

        function hover(x) {
            x.style.background = "rgba(244,247,251,0.5)";
        }

        function dishover(x) {
            x.style.background = "#FFFFFF"
        }
    </script>
{% endblock %}
{% block hotelmanage %}{% endblock %}


{% block body %}
    <div class="right">
        <!-- 用户 -->
        <div id="user">
            <img src="../../static/image/index/帮助.png" style="margin-bottom: 9px"/>
            <img src="../../static/image/index/通知.png" style="margin-left:36px;margin-bottom: 9px"/>
            <img src="../../static/image/index/图像 2.png"
                 style="width:40px;height:40px;background:rgba(255,255,255,1);border-radius:50%;opacity:1;margin-left:28px;justify-content:center;overflow:hidden;align-items: center;"/>
            <img src="../../static/image/index/路径 1146@2x.png" style="width:7px;margin-left:12px;margin-bottom: 15px "/>
        </div>

        <!--事务表单-->
        <div class="actiontable"
             style="padding-top:28px;padding-left:5px;padding-right:5px;background: #FFFFFF;border-radius: 10px;box-shadow:0px 0px 10px rgba(0,0,0,0.01);overflow:auto;width: 1525px">
            <!--    查询框-->
            <div style="float:left;margin-left:30px;margin-top:35px;margin-right:600px;margin-bottom: 33px;padding-right:2px;width:206px;height:32px;border:1px solid rgba(228,228,228,1);opacity:1;border-radius:16px;">
                <img src="../../static/image/user/search.png"
                     style="width: 16px;margin-left: 10px;float: left;margin-top:8px;margin-right: 3px;"/>
                <input type="text" value="输入关键词" onclick="clearvalue(this)" onblur="defaultvalue(this)"
                       style="height: 30px;width: 120px;border: none;outline: none;color: #E4E4E4;padding: 0px;">
                <a href="#"
                   style="float:right;margin-top:3px;width:41px;height:26px;background:rgba(239,240,245,1);opacity:1;border-radius:18px;">
                    <img src="../../static/image/index/backstagesettings(1).png"
                         style="width: 16px;margin-left: 13px;margin-top:4px;"/>
                </a>
            </div>
            <script>
                function clearvalue(x) {
                    x.value = "";
                }

                function defaultvalue(x) {
                    if (x.value == "") {
                        x.value = "请输入关键词";
                    }
                }
            </script>

            <table id="table" cellpadding="0" cellspacing="0">
                <thead>
                <tr>
                    <th style="width: 200px">地点</th>
                    <th style="width: 270px">时间</th>
                    <th style="width: 190px">人员</th>
                    <th style="width: 190px">部门</th>
                    <th style="width: 190px">姓名</th>
                    <th style="width: 190px">行为</th>
                    <th style="width: 190px">房间号</th>
                    <th colspan="2"></th>
                </tr>
                <tr style="height: 13px"></tr>
                </thead>
                <tbody>
                {% for action in action_list %}
                    <tr onmouseover="hover(this);" onmouseout="dishover(this);">
                        <td>{{ action.activity_name }}</td>
                        <td>{{ action.time }}</td>
                        {% if action.customer != null %}
                            <td>客人</td>
                            <td>--</td>
                            <td>{{ action.customer.name }}</td>
                            <td>进入</td>
                            <td>{{ action.customer.room.room_number }}</td>
                        {% elif action.staff != null %}
                            <td>员工</td>
                            <td>{{ action.staff.department.name }}</td>
                            <td>{{ action.staff.name }}</td>
                            <td>进入</td>
                            <td>--</td>
                        {% else %}
                            <td>未知人员</td>
                            <td>--</td>
                            <td>--</td>
                            <td>进入</td>
                            <td>--</td>
                        {% endif %}
                        <td>
                            <a href="#">
                                <img src="/static/image/action/delete.png" style="width: 21px"/>
                            </a>
                        </td>
                        <td>
                            <a href="#">
                                <img src="/static/image/action/update.png" style="width: 21px"/>
                            </a>
                        </td>

                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <script src="//www.mdui.org/source/dist/js/mdui.min.js"></script>
    </div>
{% endblock %}